<template>
  <div id="register">
    <div class="banner">
      <img
        class="logo"
        src="../../assets/images/entrance/logo.png"
        alt="">
      <img class="banner" src="../../assets/images/entrance/welcome.png"/>
      <p class="title">请进行信息登记</p>
    </div>
    <form action="" id="register-form">
      <ul>
        <li>
          <div class="wrap">
            <label for="user-name" class="icon-user-name"></label>
            <input
              type="text"
              id="user-name"
              name="姓名"
              placeholder="请输入姓名"
              v-model.trim="userName"
              v-validate="'required|userName'">
          </div>
          <span v-show="VeeErrors.has('姓名')">{{ VeeErrors.first('姓名') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="tel" class="icon-user-tel">
            </label>
            <input
              type="tel"
              id="tel"
              name="手机"
              placeholder="请输入手机号"
              v-model.trim="tel"
              v-validate="'required|tel'">
          </div>
          <span v-show="VeeErrors.has('手机')">{{ VeeErrors.first('手机') }}</span>
        </li>
        <li>
          <div class="wrap">
            <label for="id-num" class="icon-user-id"></label>
            <input
              type="text"
              id="id-num"
              name="身份证"
              placeholder="请输入身份证"
              v-model.trim="idNum"
              v-validate="'idNum'">
          </div>
          <span v-show="VeeErrors.has('身份证')">{{ VeeErrors.first('身份证') }}</span>
        </li>
      </ul>

      <article class="public-form-article">
        <header>上传身份证</header>
        <section>
          <div class="item">
            <div class="public-input-wrap" @click="$tool.clickIdDom('idFrontInput')">
              <input
                type="file"
                id="idFrontInput"
                name="idFrontInput"
                @change="uploadIdCard($event, 'idFrontImg')">
              <div class="cross">
                <span class="upright"></span>
                <span class="across"></span>
              </div>
              <img
                v-if="idFrontImg"
                :src="idFrontImg"
                alt="">
            </div>
            <h2>正面</h2>
          </div>
          <div class="item">
            <div class="public-input-wrap" @click="$tool.clickIdDom('idBackInput')">
              <input
                type="file"
                id="idBackInput"
                name="idBackInput"
                @change="uploadIdCard($event, 'idBackImg')">
              <div class="cross">
                <span class="upright"></span>
                <span class="across"></span>
              </div>
              <img
                v-if="idBackImg"
                :src="idBackImg"
                alt="">
            </div>
            <h2>背面</h2>
          </div>
        </section>
      </article>

      <input
        type="button"
        value="登记"
        @click="register"
        :disabled="registerDisabled">
    </form>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {
        userName: '',
        tel: '',
        idNum: '',
        idFrontImg: '',
        idBackImg: '',
        registerDisabled: false
      }
    },
    methods: {
      uploadIdCard(event, img) {
        let formData = new FormData();
        formData.append('file', event.target.files[0]);
        this.$http.axios({
          url: this.$http.imgURL,
          method: 'post',
          data: formData
        }).then((res) => {
          if (res.data.error === 0) {
            this[img] = res.data.data.img_url;
          } else if (res.data.error === 1) {
            alert(res.data.msg);
          }
        }).catch((error) => {
          console.log(error);
        })
      },
      register() {
        this.$validator.validateAll().then((result) => {

          if (result) {

            // 1 - form 验证通过

            this.$http.post({
              api: this.$api.USER_REGISTER,
              params: {
                recommender: this.$route.params.id,
                user_login: this.userName,
                mobile: this.tel,
                identification: this.idNum,
                id_card_face: this.idFrontImg,
                id_card_back: this.idBackImg
              },
              success: function (res) {

                this.$tool.whenToast(
                  () => {
                    // 禁止重复点击登录按钮 （不再处理恢复，路由跳转后组件销毁了）

                    this.registerDisabled = true;
                  },
                  {
                    message: '资料上传中...',
                    duration: 1800
                  },
                  () => {

                    // 跳转

                    this.$router.push('/tip/0');
                  }, 1800
                );
              }.bind(this)
            });
          } else {

            // 2 - form 验证不通过

            this.$tool.whenToast(
              () => {

                // 暂时禁止登录按钮的点击

                this.registerDisabled = true;
              },
              {
                message: '请完善个人信息',
                duration: -1,
                iconClass: 'public-toast-icon error'
              },
              () => {

                // 恢复登录按钮的点击

                this.registerDisabled = false;
              }, 2000
            );
          }
        });
      }
    }
  }
</script>

<style lang="scss">

  #register {
    padding: 1rem;
    background: $white;

    $blue: #063359;
    $register-height: 3.9rem;

    >.banner {
      height: 26rem;
      background: url("../../assets/images/entrance/banner.png") no-repeat center / $size-as-parent $size-as-parent;
      border-radius: .8rem .8rem 0 0;

      >.logo {
        width: 8.5rem;
        display: inline-block;
        margin: 2.7rem 0 0 1rem;
      }

      >.banner {
        width: 20rem;
        margin: 2.8rem auto;
      }

      >.title {
        color: $white;
        font-size: 1.5rem;
        text-align: center;
        margin-top: 7.8rem;
      }
    }

    >form {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 1rem 1rem;
      border-radius: 0 0 .8rem .8rem;
      background: $blue;

      >ul {
        width: $size-as-parent;

        >li {

          $li-height: 4.3rem;

          position: relative;
          height: $li-height;
          border-radius: $li-height / 2;
          margin-bottom: 1.4rem;
          background: $white;

          >.wrap {
            display: flex;
            align-items: center;
            height: $size-as-parent;

            >label {

              $label-size: 40px;

              display: flex;
              align-items: center;
              justify-content: center;
              width: $label-size;
              height: $label-size;
              border-radius: $label-size / 2;
              background: #f5f5f5 url("../../assets/images/entrance/icons.png") no-repeat center / 16px auto;

              &.icon-user-name {
                background-position: center 10px;
              }

              &.icon-user-tel {
                background-position: center -299px;
              }

              &.icon-user-id {
                background-position: center -374px;
              }
            }

            >input {
              flex: 1;
              height: $size-as-parent;
              font-size: 1.3rem;
              color: #333;
              padding-left: 3rem;
              border-radius: 25px;
            }
          }

          >span {
            position: absolute;
            right: 0;
            top: $size-as-parent;
            color: #e4393c;
          }
        }

        > li:nth-child(3) {
          margin-bottom: 0;
        }
      }

      >.public-form-article {
        width: 100%;
        background: $blue;

        >header {
          font-size: 1.2rem;
          color: #fff;
          padding: 0 0 1.2rem;
          margin-bottom: 0;
        }

        .public-input-wrap {
          border-radius: 6px;
          background: $white;
        }

        h2 {
          font-size: 1rem;
          color: $white;
          margin: 1rem 0 0 0;
        }
      }

      > input {
        width: $size-as-parent;
        height: $register-height;
        line-height: $register-height;
        font-size: 1.8rem;
        color: #fff;
        text-align: center;
        border-radius: .6rem;
        background: #0097ff;
      }
    }
  }
</style>
